<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>axios2</title>
		<script src="../js/axios.js"></script>
		<script>
			/* 总结：前端Get请求参数传递的方式3种 
			 * 方式1：通过？属性=属性值的方法拼接
			 * 方法2：通过对象的方式实现数据传递
			 * 方式3：利用restFul结构实现参数的传递
			 * 作业1：根据ID查询用户信息
			 * 作业2：根据name/sex查询用户信息
			 */
			
			/* 作业1：根据ID查询用户信息
			 * url地址：http://localhost:8090/axios/findUserById
			 * 参数：id=1
			 * 返回值：console.log()输出
			*/
		   let url1="http://localhost:8090/axios/getUserById?id=1"
		   axios.get(url1).then(function(p){
			   alert("请打开console，查看获取到的数据")
			   console.log(p.data)
		   })
		   /* 作业2：根据name/sex查询用户信息
		    * url地址：http://localhost:8090/axios/findUserByNS
		    * 参数：name=小乔/sex=女
		    * 返回值：console.log()输出
			* 利用对象的方式进行数据封装
			* var没有作用域，是全局变量。let有作用域
		   */
		   let url2="http://localhost:8090/axios/findUserByNS"
		   let user={
			   name: "小乔",
			   sex: "女"
		   }
		   axios.get(url2,{params: user}).then(function(p){
			   //alert("请打开console，查看获取到的数据")
			   console.log(p.data)
		   })
		   /* 案例三：利用restFul实现数据封装
		    * 需求：根据name/sex查询数据
			* 知识点：
			* 			模板字符串写法：语法ES7的写法	一对反引号``进行数据拼接
			* 			通过${} 获取变量
		    */
		   let name="守山大将"
		   let sex="男"
		   //let url3="http://localhost:8090/axios/user/"+name+"/"+sex		旧写法
		   let url3=`http://localhost:8090/axios/user/${name}/${sex}`
		   axios.get(url3).then(function(p){
			   console.log(p.data)
		   })
		</script>
	</head>
	<body>
	</body>
</html>
